<template>
  <!-- <el-aside width="200px">Aside</el-aside> -->
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu default-active="/home/welcome" :router="true">
      <el-menu-item index="/home/welcome">
        <i class="el-icon-location"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i>系统管理
        </template>
        <el-menu-item v-for="(item,i) in navbar" :key="i" :index="item.navPath">
          <template slot="title">
            <i :class="item.navClass"></i>
            <span>{{item.navItem}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      navbar: [
        // {
        //   navPath: "/home/user",
        //   navClass: "el-icon-user",
        //   navItem: "用户管理"
        // },
        // {
        //   navPath: "/home/role",
        //   navClass: "el-icon-coin",
        //   navItem: "角色管理"
        // },
        // {
        //   navPath: "/home/menu",
        //   navClass: "el-icon-menu",
        //   navItem: "菜单管理"
        // }
      ]
    };
  },
  methods: {
    getNavBar(){
      const that=this;
       this.$http
        .get("/findAllNavBar")
        .then(res=>{
          // console.log(res.data);
          that.navbar = res.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created(){
    this.getNavBar();
  }
};
</script>
<style lang='less' scoped>

</style>